<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>发布房源</title>
        <link rel="stylesheet" href="./css/reset.css" />
        <link rel="stylesheet" href="./css/global.css" />
        <link rel="stylesheet" href="./css/element-ui.css" />
        <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css" />
        <link rel="stylesheet" href="./css/sellHouse.css" />
        <script src="./js/adapter.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="bg">
                <img src="./img/bg.png" class="bg" />
            </div>
            <div class="title"></div>
            <div class="search_page">
                <div class="form_item_info">
                    <div class="content_title_wrap">
                        <div class="title_line"></div>
                        <div class="content_title fs16">
                            城市<span class="ml10">天津</span>
                        </div>
                    </div>
                    <div class="content">
                        <div class="item">
                            <div class="item_title fs14">区域</div>
                            ：
                            <div
                                class="picker myfc-1 fs14"
                                @click="districtVisible = true"
                            >
                                <div>{{districtName}}</div>
                                <div>
                                    <i class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item_title fs14">小区名称</div>
                            ：
                            <div class="picker myfc-1 fs14" @click="openArea">
                                <div>{{areaName}}</div>
                                <div>
                                    <i class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item_title fs14">具体地址</div>
                            ：
                            <div
                                class="picker myfc-1 fs14"
                                @click="openAddress"
                            >
                                <div>{{districtName}}</div>
                                <div>
                                    <i class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item_title fs14">产别</div>
                            ：
                            <div class="picker myfc-1 fs14">
                                <div>{{districtName}}</div>
                                <div>
                                    <i class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item_title fs14">姓名</div>
                            ：
                            <div class="picker myfc-1 fs14">
                                <input placeholder="如何称呼您" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="item_title fs14">联系方式</div>
                            ：
                            <div class="picker myfc-1 fs14">
                                <input placeholder="请输入" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="item_title fs14">期望售价</div>
                            ：
                            <div class="picker myfc-1 fs14">
                                <input placeholder="请输入" />
                                <div style="white-space: nowrap">万元</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item_title fs14">面积</div>
                            ：
                            <div class="picker myfc-1 fs14">
                                <input placeholder="请输入" />
                                <div>m²</div>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="submit_btn fs16" @click="submit">
                    发布房源
                </button>
            </div>
            <mt-popup
                v-model="districtVisible"
                popup-transition="popup-fade"
                position="bottom"
            >
                <div class="pop_content">
                    <div class="head fs16">
                        <div></div>
                        <div class="fc-7" @click="onConfirm">确定</div>
                    </div>
                    <mt-picker
                        :slots="district"
                        @change="onChange"
                        :visible-item-count="3"
                    ></mt-picker>
                </div>
            </mt-popup>
            <mt-popup
                v-model="areaVisible"
                popup-transition="popup-fade"
                position="right"
                class="area_content"
            >
                <mt-search
                    v-model="searchValue"
                    cancel-text="取消"
                    :placeholder="placeholder"
                    @input="searchArea"
                    show
                >
                    <div class="search_result_list">
                        <ul v-for="item in areaList" :key="item.id">
                            <li @click="confirmArea(item)">{{item.name}}</li>
                        </ul>
                    </div>
                    <div class="search_result_list">
                        <ul v-for="item in buildList" :key="item.buildingCode">
                            <li @click="confirmBuilding(item)">
                                {{item.buildingName}}
                            </li>
                        </ul>
                    </div>
                    <div class="search_result_list">
                        <ul v-for="item in houseList" :key="item.buildingCode">
                            <li @click="confirmUnit(item)">
                                {{item.unitName}}
                            </li>
                        </ul>
                    </div>
                    <div class="search_result_list">
                        <ul v-for="item in houseList" :key="item.buildingCode">
                            <li @click="confirmUnit(item)">
                                {{item.unitName}}
                            </li>
                        </ul>
                    </div>
                </mt-search>
            </mt-popup>
        </div>
        <script src="./plugins/vue.min.js"></script>
        <script src="./plugins/axios.min.js"></script>
        <!-- 引入组件库 -->
        <script src="./plugins/element-ui.min.js"></script>
        <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
        <script src="./utils/baseUrl.js"></script>
        <script src="./js/sellHouse.js"></script>
    </body>
</html>
